<template>
  <div>
    <div class="content-main flex flex-col items-center py-[20px]">
      <el-steps style="min-width: 600px" :active="active" finish-status="success">
        <el-step title="发布内容" />
        <el-step title="发布设置" />
      </el-steps>

      <div v-if="active === 0" class="w-[66vw]">
        <releaseList />
      </div>
      <div v-else-if="active === 1" class="w-[66vw]">
        <div class="publish-settings p-6 bg-white rounded-lg shadow">
          <el-form-item label="标题" prop="issueTitle" label-position="top">
            <el-input v-model="publishForm.issueTitle" type="text" placeholder="请输入标题" />
          </el-form-item>
          <div class="flex">
            <el-form-item label="封面和摘要" label-position="top" prop="issueCoverImage">
              <Uploader v-model="publishForm.issueCoverImage" />
            </el-form-item>
            <el-form-item prop="issueDescription">
              <el-input
                v-model="publishForm.issueDescription"
                class="self-end"
                style="width: 450px; margin-left: 20px; height: 120px"
                :rows="5"
                type="textarea"
                placeholder="请输入内容摘要"
              />
            </el-form-item>
          </div>
          <el-form-item label="发布时间" label-position="top" prop="waitPubTime">
            <el-radio-group v-model="radio">
              <el-radio :value="3">立即发布</el-radio>
              <el-radio :value="6">
                <div class="bloc">
                  <span>定时发布</span>
                  <el-date-picker
                    v-if="radio === 6"
                    v-model="publishForm.waitPubTime"
                    class="mx-[20px]"
                    type="datetime"
                    placeholder="请选择发布时间"
                    :default-time="defaultTime"
                  />
                </div>
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </div>

      <div class="mt-6 flex space-x-4">
        <el-button v-if="active > 0" @click="prev" type="default">上一步</el-button>
        <el-button v-if="active < 1" @click="next" type="primary">下一步</el-button>
        <el-button v-else type="success" @click="finish">发布</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import releaseList from '@/components/JournaLism/releaseList.vue'
import { ref, reactive } from 'vue'
import Uploader from '@/components/lssue/Uploader.vue'
import { settings } from '@/API/AllApi'
import { ElMessage } from 'element-plus'

const active = ref(0)
const router = useRouter()
const radio = ref(3)
const defaultTime = new Date(2000, 1, 1, 12, 0, 0)
const publishForm = reactive({
  issueTitle: '',
  issueDescription: '',
  issueCoverImage: '',
  waitPubTime: undefined,
  issuePublisher: '',
})

const next = () => {
  if (active.value < 1) {
    active.value++
  }
}

const prev = () => {
  if (active.value > 0) {
    active.value--
  }
}

const finish = async () => {
  try {
    const response = await settings(publishForm)
    if (response.code === 200) {
      ElMessage.success('发布设置成功')
      router.push('/alreadyIssue')
    }
  } catch (error) {
    console.error('发布设置失败:', error)
    ElMessage.error('发布设置失败')
  }
}
</script>

<style scoped>
.content-main {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.publish-settings {
  margin-top: 20px;
  min-height: 400px;
}
</style>